Search for notes by fellow students, in your own course and all over the country.
Browse our notes for titles which look like what you need, you can preview any of the notes via a sample of the contents. After you're happy these are the notes you're after simply pop them into your shopping cart.
Title: Reactjs Interview Questions
Description: React is a JavaScript-based UI development library. Facebook and an open-source developer community run it. Although React is a library rather than a language, it is widely used in web development. The library first appeared in May 2013 and is now one of the most commonly used frontend libraries for web development.in this notes i have done 300+ interview questions and answers so that is best for interview from my side
Description: React is a JavaScript-based UI development library. Facebook and an open-source developer community run it. Although React is a library rather than a language, it is widely used in web development. The library first appeared in May 2013 and is now one of the most commonly used frontend libraries for web development.in this notes i have done 300+ interview questions and answers so that is best for interview from my side
Document Preview
Extracts from the notes are below, to see the PDF you'll receive please use the links above
ion
...
const appReducer = combineReducers({
/* your app's top-level reducers */
})
const rootReducer = (state, action) => {
if (action
...
redux-persist keeps a copy of your state in a storage engine
...
const appReducer = combineReducers({
/* your app's top-level reducers */
})
const rootReducer = (state, action) => {
if (action
...
keys(state)
...
removeItem(`persist:${key}`)
})
state = undefined
}
82
return appReducer(state, action)
}
� Back to Top
164
...
Decorators make it possible to annotate and modify classes and
properties at design time
...
• Without decorator:
import
import
import
import
React from 'react'
* as actionCreators from '
...
todos }
}
function mapDispatchToProps(dispatch) {
return { actions: bindActionCreators(actionCreators, dispatch) }
}
class MyApp extends React
...
define your main app here
}
export default connect(mapStateToProps, mapDispatchToProps)(MyApp)
• With decorator:
import
import
import
import
React from 'react'
* as actionCreators from '
...
todos }
}
function mapDispatchToProps(dispatch) {
83
return { actions: bindActionCreators(actionCreators, dispatch) }
}
@connect(mapStateToProps, mapDispatchToProps)
export default class MyApp extends React
...
define your main app here
}
The above examples are almost similar except the usage of decorator
...
You can use babel for the decorators
support
...
What is the difference between React context and React Redux?
You can use Context in your application directly and is going to be great
for passing down data to deeply nested components which what it was
designed for
...
Also, React Redux uses
context internally but it doesn’t expose this fact in the public API
...
Why are Redux state functions called reducers?
Reducers always return the accumulation of the state (based on all previous and current actions)
...
Each
time a Redux reducer is called, the state and action are passed as parameters
...
You could reduce a collection of actions
and an initial state (of the store) on which to perform these actions to get
the resulting final state
...
How to make AJAX request in Redux?
You can use redux-thunk middleware which allows you to define async
actions
...
status === 200) {
dispatch(setAccount(response
...
render() {
// A new version of EnhancedComponent is created on every render
// EnhancedComponent1 !== EnhancedComponent2
const EnhancedComponent = enhance(MyComponent);
// That causes the entire subtree to unmount/remount each time!
return
}
The above code impacts on performance by remounting a component
that causes the state of that component and all of its children to be
lost
...
120
2
...
staticMethod = function() {/*
...
staticMethod === 'undefined' // true
You can overcome this by copying the methods onto the container
before returning it,
function enhance(WrappedComponent) {
class Enhance extends React
...
*/ }
// Must know exactly which method(s) to copy :(
Enhance
...
staticMethod;
return Enhance;
}
3
...
This is because ref is not really a prop similar to key
...
forwardRef API
� Back to Top
255
...
forwardRef accepts a render function as parameter and DevTools
uses this function to determine what to display for the ref forwarding
component
...
forwardRef((props, ref) => {
return
forwardRef(
function myFunction(props, ref) {
return
Component {
//
...
props} forwardedRef={ref} />;
}
// Give this component a more helpful display name in DevTools
...
g
...
displayName || Component
...
displayName = `logProps(${name})`;
return React
...
When component props defaults to true?
If you pass no value for a prop, it defaults to true
...
For example, below expressions are equivalent,
Note: It is not recommended to use this approach because it can be
confused with the ES6 object shorthand (example, {name} which is short
for {name: name})
� Back to Top
257
...
js is a popular and lightweight framework for static and
server‑rendered applications built with React
...
Below are the major features provided by NextJS,
122
1
...
3
...
5
...
Server-rendered by default
Automatic code splitting for faster page loads
Simple client-side routing (page based)
Webpack-based dev environment which supports (HMR)
Able to implement with Express or any other Node
...
How do you pass an event handler to a component?
You can pass event handlers and other functions as props to child components
...
handleClick}>
� Back to Top
259
...
It is often the easiest way to pass parameters to callback
functions
...
class Foo extends Component {
handleClick() {
console
...
handleClick()}>Click Me;
}
}
Note: Using an arrow function in render method creates a new function
each time the component renders, which may have performance implications
� Back to Top
260
...
This can be achieved in the below
possible ways,
123
1
...
For example,
it can be used using _
...
Debouncing: Publish changes after a period of inactivity
...
debounce lodash function
3
...
For example, it can be used using raf-schd lodash
function
� Back to Top
261
...
Thus it ensures that you can never inject anything that’s not explicitly
written in your application
...
For example, you can embed user input as below,
const name = response
...
� Back to Top
262
...
For example, lets take a ticking clock example, where it updates the time
by calling render method multiple times,
function tick() {
const element = (
Hello, world!
It is {new Date()
...
);
ReactDOM
...
getElementById('root'));
}
setInterval(tick, 1000);
124
� Back to Top
263
...
Let us take a below capital function,
function capital(amount, interest) {
return amount + interest;
}
The above function is called “pure” because it does not attempt to change
their inputs, and always return the same result for the same inputs
...
”
� Back to Top
264
...
For example, let us take a facebook user with posts and comments details
as state variables,
constructor(props) {
super(props);
this
...
then(response => {
this
...
posts
});
});
fetchComments()
...
setState({
comments: response
...
setState({comments})
updates only comments variable without modifying or replacing posts
variable
...
How do you pass arguments to an event handler?
During iterations or loops, it is common to pass an extra parameter to
an event handler
...
Let us take an example of user details updated in a grid,